<template>
  <div>
    <button v-on:click="fn">点击</button>
    <!-- 简写形式 -->
    <button @click="fn">点击2</button>
    <button @click="huaMoney(1000)">购物花了1000</button>
    <button @click="huaMoney(800)">外卖花了800</button>
    <button @click="huaMoney(500)">零食花了500</button>
    <div @click="divClick" style="width:200px ; height:200px; border:1px solid red ">
      <!-- 若需要传参  手动$event  位置可以变，不固定，接收的形参也在相应位置即可-->
      <button @click="innerClick($event,100)">内层的button按钮</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'on-component',
  methods: {
    fn() {
      console.log('点击事件触发了');
    },
    huaMoney(money) {
      console.log('花了'+money+'元');
    },
    divClick() {
      console.log('外层的div盒子被点击了');
    },
    innerClick(e,num) {  //形参接收
      // 阻止冒泡
      e.stopPropagation();
      
      console.log('里层的button被点击了');
    }
  }
}
</script>